<template>
  <div id="home">
    <!-- 装饰品 -->
    <div class="backGround">
      <div class="backBlack"></div>
      <div class="backImg"></div>
    </div>
    <div class="logo"></div>
    <div class="text">
      <div class="title">WELCOME TO GODZ CONTROL PLATFORM</div>
      <div class="maintext">圆周率π之都,兰洋夸特墓室，英国康沃尔郡</div>
    </div>
    <!-- 登录界面 -->
    <div
      class="login"
      v-loading="loading"
      element-loading-background="rgba(0, 0, 0, 0.9)"
    >
      <div class="head">登录</div>
      <div class="body">
        <div class="user">
          <span>登录账号</span>
          <input v-model="ruleForm.username" type="text" />
        </div>
        <div class="password">
          <span>登录密码</span>
          <input v-model="ruleForm.password" type="password" />
        </div>
      </div>
      <div class="footer">
        <div @click="login">登录</div>
        <div @click="cancel">重置</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      ruleForm: {
        username: "",
        password: "",
      },
      loading: false,
    };
  },
  methods: {
    login() {
      console.log(this.ruleForm);
      console.log("登录变量目前是" + sessionStorage.getItem("pass"));

      this.loading = true;

      const _this = this;
      this.axios({
        method: "post",
        url: _this.baseUrl + "/login/root/password",
        //传递给后端的数据
        data: _this.ruleForm,
      }).then(function (resp) {
        console.log("密码目前是" + resp.data);
        if (resp.data) {
          sessionStorage.setItem("pass", true); //设置会话可以进入
          // localStorage.setItem('pass',true) //长久保存,不合适,关闭浏览器后,依然可以进/main/...
          _this.$message({
            showClose: true,
            message: "欢迎登录,我的主人",
            type: "success",
          });
          _this.$router.push("/main");
        } else {
          _this.$message({
            showClose: true,
            message: "密码错误,或者用户名不存在",
            type: "error",
          });
        }
        _this.loading = false;
      });
    },
    cancel() {
      this.ruleForm.username = "";
      this.ruleForm.password = "";
    },
  },
};
</script>

<style scoped lang="less">
#home {
  width: 100%;
  height: 100%;
  .backGround {
    width: 100%;
    height: 100%;
    .backBlack {
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: black;
      opacity: 0.3;
      z-index: 2;
    }
    .backImg {
      position: absolute;
      width: 100%;
      height: 100%;
      background: url("../assets/4k.jpg") no-repeat;
      background-size: 100% 100%;
    }
  }
  .logo {
    position: absolute;
    width: 10%;
    height: 10%;
    background: url("../assets/mainImg/headlogo.png") no-repeat;
    background-size: 100%;
    z-index: 3;
    top: 5%;
    left: 10%;
  }
  .text {
    position: absolute;
    z-index: 3;
    width: 45%;
    top: 30%;
    left: 10%;
    .title {
      color: skyblue;
      font-size: 24px;
    }
    .maintext {
      color: white;
      font-size: 64px;
    }
  }
  .login {
    position: absolute;
    z-index: 4;
    width: 20%;
    height: 50%;
    right: 15%;
    top: 20%;
    background-color: rgba(255, 255, 255, 0.3);
    .head {
      width: 100%;
      height: 48px;
      background-color: rgba(#0078ff, 0.8);
      color: white;
      font-size: 18px;
      text-align: center;
      line-height: 48px;
    }
    .body {
      width: 100%;
      .user,
      .password {
        margin-top: 10%;
        width: 100%;
        span {
          display: block;
          max-width: 100%;
          margin-bottom: 5px;
          margin-left: 10%;
          font-size: 18px;
          color: whitesmoke;
        }
        input {
          display: block;
          width: 70%;
          height: 48px;
          margin: auto;
          box-shadow: none;
          background: transparent;
          border: 1px solid #0078ff;
          font-size: 28px;
          color: white;
          box-shadow: none;
          padding-left: 15px;
          padding-right: 15px;
          &:active,
          &:focus {
            outline: none;
            box-shadow: none;
            border-color: #f54c53;
          }
        }
      }
      .password {
        margin-top: 5%;
      }
    }
    .footer {
      width: 100%;
      margin-top: 10%;
      div {
        display: inline-block;
        width: 35%;
        height: 48px;
        margin-left: 10%;
        line-height: 48px;
        color: #fff;
        border: 1px solid #0078ff;
        font-size: 16px;
        text-align: center;
        cursor: pointer;
        &:hover {
          border: 1px solid #f54c53;
        }
      }
      div:nth-child(2) {
        margin-left: 7%;
      }
    }
  }
}
</style>
